<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<link rel='stylesheet' type='text/css' href='${pageContext.request.contextPath}/script/jquery/fullcalendar/theme.css' />
<link rel='stylesheet' type='text/css' href='${pageContext.request.contextPath}/script/jquery/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='${pageContext.request.contextPath}/script/jquery/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='${pageContext.request.contextPath}/script/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='${pageContext.request.contextPath}/script/jquery/fullcalendar/fullcalendar.js'></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery/qtip2/jquery.qtip.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery/jquery.contextmenu.r2.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery/qtip2/jquery.qtip.min.css" type="text/css"></link>
<style type="text/css">

</style>

<script type='text/javascript'>
//alert($.fullCalendar.parseDate('${startdate}'));
//alert('${y}');alert('${m}'-1);
	$(document).ready(function() {
		
		var startdate = $.fullCalendar.parseDate('${startdate}');
		var enddate = $.fullCalendar.parseDate('${enddate}');
		var date = new Date();
		var d = date.getDate();
		var m = '${m}';
		var y = '${y}';
		var source;
		
		$('#calendar1').fullCalendar({
			year:y,
			month:m,
			firstDay:1,
			monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
			monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
			dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
			dayNamesShort: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
			allDayText: '全天',
			axisFormat: 'H时(mm分)',
			currentTimezone: 'Asia/Beijing',
			timeFormat: { // for event elements
				'': 'H时(mm分)' // default
			},
			weekMode:'liquid',//可能会显示4, 5, 6周, 依赖于月份, 每周的高度会拉长到填充可变高度,   视aspectRatio而定,   这里月份的高度是定的.
			buttonText: {
				today: '今天',
				month: '月',
				week: '周',
				day: '日'
			},
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: [],
			viewDisplay: function(ele){			
				$.getJSON('${pageContext.request.contextPath}/admin/user/getCalendarInfo.shtml',{sstarttime:jQuery.fullCalendar.formatDate(ele.visStart, 'yyyy-M-dd'),estarttime:jQuery.fullCalendar.formatDate(ele.visEnd, 'yyyy-M-dd')},function(data) {      
					$("#calendar1").fullCalendar('removeEventSource', source);
					source = data;
					$("#calendar1").fullCalendar('addEventSource',source,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示      
					                       
				});
				
			},
			eventRender: function(event, element) {
		        element.qtip({
		        	content: {
		        	    text: '开始时间：'+jQuery.fullCalendar.formatDate(event.start, 'yyyy年M月dd日(HH时)(mm分)')+(event.end?"<br/>结束时间："+jQuery.fullCalendar.formatDate(event.end, 'yyyy年M月dd日(HH时)(mm分)'):"")+'<br/>详　　情：'+event.description
		        	    , title: {
		        			text: "日程安排-"+event.title
		        	    }
		        	}
		        	,style: {
		        		classes: 'qtip-blue qtip-shadow qtip-rounded'     		
		        	}
		        	,position: {
		        	    my: 'top center',
		        	    at: 'bottom center'
		        	}
		        }).contextMenu('myMenu', {
			    	onContextMenu: function(e) {	
			    		//是否显示
			        	//if ($(e.target).hasClass('bluebg')) return true;
			    		return true;
			      	},
			      	onShowMenu: function(e, menu) {
			      		alert(123);
			      		//$('#split', menu).remove();//选中多项只能合并
			        	return menu;		
			      	},
			      	bindings: {
		        		'calanderinfoedit': function(t) {
		        			
		        		},
		        		'calanderinfodele': function(t) {
		        			
		        		}
		  			}		
			    });
		    },
		    dayClick : function(dayDate, allDay, jsEvent, view){
		    	//alert(dayDate);
		    },
		    eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){
		    	updateCalendar(calEvent,revertFunc);
		    },
		    eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view)  {
		    	updateCalendar(calEvent,revertFunc);
		    }

		});
		
		$("#addCalendar").bind('click',function(){
			$.pdialog.open('${pageContext.request.contextPath}/jsp/back/changepwd.jsp', 'addcalendar', '添加日历事件',{mask:true,close:"function"});
			
		});
		
		if($.browser.msie){   
			//$("#calendar1 .fc-header-right").before('<td style="width:100px;"><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 0px;width: 100px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"><span id="selectdate" class="fc-button ui-icon ui-icon-search">goto</span></div></td>');   
		}else{   
			//$("#calendar1 .fc-header-right").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');   
		}		
	});
	function updateCalendar(calEvent,revertFunc){
		if(confirm("确定更改日程的时间吗?")){
    		var calid = calEvent.id;
	    	$.getJSON('${pageContext.request.contextPath}/admin/user/updateCalendarInfo.shtml',
	    		{id:calEvent.ucid,
	    		start:jQuery.fullCalendar.formatDate(calEvent.start, 'yyyy-M-dd H:mm:ss'),
	    		end:jQuery.fullCalendar.formatDate(calEvent.end, 'yyyy-M-dd H:mm:ss')},
	    		function(data) {      
					navTabAjaxDone(data);
					if(!data.flag)
						revertFunc();
			});
	    	
	    	$.each($("#calendar1").fullCalendar('clientEvents'),function(i,n){
	    		if(n.id == calid){
	    			$.getJSON('${pageContext.request.contextPath}/admin/user/updateCalendarInfo.shtml',
				    		{id:n.ucid,
				    		start:jQuery.fullCalendar.formatDate(n.start, 'yyyy-M-dd H:mm:ss'),
				    		end:jQuery.fullCalendar.formatDate(n.end, 'yyyy-M-dd H:mm:ss')},
				    		function(data) {      
								navTabAjaxDone(data);
								if(!data.flag)
									revertFunc();
						});
	    		}
	    	});
    	}else{
    		revertFunc();
    	}
	}
</script>
<style type='text/css'>

	

	#calendar1 {
		width: 900px;
		margin: 0 auto;
	}

</style>

<div class="pageContent">
	
	<div class="pageFormContent" layoutH="57">
		<div id='calendar1'></div>		
	</div>
	<div class="formBar">
		<ul>
			<li>
				<div class="button"><div class="buttonContent"><button type="button" id="addCalendar">添加日程安排</button></div></div>
			</li>
			<li>
				<div class="button"><div class="buttonContent"><button type="button" class="close">关闭</button></div></div>
			</li>
		</ul>
	</div>
</div>
<div class="contextMenu" id="myMenu" style="position: absolute;">
    <ul>
      <li id="calanderinfoedit">编辑</li>
      <li id="calanderinfodele">删除</li>
    </ul>
</div>
<script>
	
</script>
